<template>
  <div>
    <myDivider name="大屏配置列表"></myDivider>
    <div>
      <!-- <div style="display: flex;">
        <el-select clearable v-model="keyRqId" placeholder="筛选小区">
          <el-option v-for="item, i in residentailData" :key="i" :label="item.name" :value="item.residentialId">
          </el-option>
        </el-select>
        <el-button type="primary" style=" margin-left: 15px" @click="SouSuo">查询</el-button>
        <el-button style="margin-left: 15px" @click="reset">重置</el-button>
      </div> -->
      <div style="display: flex;justify-content: flex-end;margin-top: 10px;padding-right: 20px;box-sizing: border-box;">
        <el-button type="primary" @click="addClick">新增</el-button>
      </div>
    </div>
    <el-table class="tableBox" :data="TableData" style="width: 100%">

      <el-table-column align="center" prop="createTime" label="创建时间" min-width="200px">
      </el-table-column>
      <el-table-column align="center" prop="rqName" label="所属小区" width="100px">
      </el-table-column>
      <el-table-column align="center" prop="versionCode" label="数据大图" min-width="180px">
        <template slot-scope="scope">
          <el-image style="width: 50px; height: 50px" :src="scope.row.pic" :preview-src-list="[scope.row.pic]">
          </el-image>
        </template>
      </el-table-column>

      <el-table-column align="center" label="操作" width="200px" fixed="right">
        <template slot-scope="scope">
          <div class="textBtn">
            <el-row>
              <el-col class="el" :span="5">
                <span style="color: #5fadff;cursor: pointer;font-weight: 600;" @click="detailClick(scope.row)">详情</span>
              </el-col>
              <el-col class="el" :span="5">
                <span style="color: #5fadff;cursor: pointer;font-weight: 600;" @click="updateClick(scope.row)">编辑</span>
              </el-col>
            </el-row>
          </div>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页器 -->
    <myPagination :pageNum="pageNum" :total="totalSize" @PageChange="PageChange" @pageSizeChange="pageSizeChange">
    </myPagination>
  </div>
</template>





<script>
export default {

  data() {
    return {
      keyRqId: '',
      // 主要表格==================

      TableData: [], //用户数据
      pageNum: 1,
      pageSize: 10,
      totalSize: 0,
      // ==================主要表格
      residentailData: [],
      logOnUser: {}
    };
  },
  async activated() {
    this.logOnUser = JSON.parse(sessionStorage.getItem('logOnUser'))
    this.reset() // 重置清空 然后查询列表
    this.getResidentailData()
  },
  methods: {

    async getResidentailData() {
      let res = await this.$api.axios.get('/business/patrolQRCode/getCommunityList?name=')
      if (res) {
        this.residentailData = res.data
      }
    },

    // 主要按钮 ===============================================================
    addClick() { //新增按钮
      this.$router.push('/companylargeScreenUpdate?type=add') //居委会大屏数据新增
    },


    detailClick(row) {//详情按钮
      this.$router.push('/companyLargeDetail?id=' + row.id)
    },

    updateClick(row) {//编辑按钮
      this.$router.push('/companylargeScreenUpdate?type=update&id=' + row.id) //居委会大屏数据修改
    },

    deleteClick(row) { //删除按钮
      this.$confirm('此操作将删除该版本记录, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        let res = await this.$api.axios.get('/business/appUpgrade/deleteLogic?id=' + row.id)
        if (res) {
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
          this.getTableList()
        }
      }).catch(() => {

      });
    },
    //======================================================================主要按钮






    // 列表 =====================================================================
    PageChange(e) {//分页器——页数变化
      this.pageNum = e
      this.getTableList()
    },
    pageSizeChange(e) { //分页器——每页数量变化
      this.pageNum = 1
      this.pageSize = e
      this.getTableList()
    },
    SouSuo() {
      this.pageNum = 1
      this.getTableList()
    },
    reset() {
      this.pageNum = 1
      this.keyRqId = ''
      this.getTableList()
    },
    //按条件查询菜单列表
    async getTableList() {

      let res = await this.$api.axios.post('/business/dataVisualCompanyConfig/list', {
        "unitType": this.logOnUser.unitType, //当前登录单位类型
        "unitId": this.logOnUser.unitId, //当前登录单位id
        "pageSize": this.pageSize,
        "pageNum": this.pageNum
      })
      if (res) {
        if (res.data.list.length == 0 && this.pageNum != 1) {
          this.pageNum = 1
          this.getTableList()
          return
        }
        this.TableData = res.data.list;
        this.totalSize = res.data.total;
      }


    },
    // ======================================================================列表

  },


};
</script>
<style scoped lang="less">
.tableBox {
  margin-top: 20px;

  /deep/ .el-table {
    .has-gutter {
      .is-leaf {
        background-color: #fafafa;
      }
    }
  }
}




.textBtn {
  position: relative;

  /deep/ .el-row {
    display: flex;
    justify-content: center;
  }

  .el {
    display: block;
    position: relative;

    &:nth-child(n+2) {

      // border-left: 1px solid #aaa;
      &::after {
        position: absolute;
        left: -1px;
        top: 50%;
        content: '';
        width: 2px;
        transform: translateY(-50%) scale(0.5, 1);
        height: 10px;
        background-color: #aaa;
      }
    }
  }
}
</style>